<template>
  <view class="page-wrap">
    <!-- 地址 -->
    <view class="address-wrap">
      <view v-if="!address" class="btn" @click="chooseAddr"> 选择地址 </view>
      <view class="address" v-else>
        <view class="top">{{ address }}</view>
        <view class="bottom">{{ username }} {{ phone }}</view>
      </view>
    </view>
    <!-- 列表 -->
    <view class="list">
      <view class="main-title">已选商品</view>
      <view class="item" v-for="item in productCheck" :key="item.goods_id">
        <image class="img" :src="item.goods_small_logo"></image>
        <view class="info">
          <view class="top u-line-2">
            {{ item.goods_name }}
          </view>
          <view class="bottom">
            <view class="price">¥ {{ item.goods_price }}</view>
            <uni-number-box v-model="item.number" :min="1">
            </uni-number-box>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="submit-bar">
      <view class="price-wrap">
        合计: <text class="price">¥ {{ totalPrice }}</text>
      </view>
      <view class="btn" :class="{ active: address }" @click="startPay"
        >去支付({{ totalNumber }})</view
      >
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      address: "",
      username: "",
      phone: "",
    };
  },
  computed: {
    ...mapGetters(["productCheck", "totalPrice", "totalNumber"]),
  },
  methods: {
    startPay() {
      if (!this.address) {
        uni.showToast({
          title: "请选择地址",
          icon: "none",
        });
      } else {
        // await this.payment();
        console.log("支付");
      }
    },
    chooseAddr() {
      uni.chooseAddress({
        // 调用成功后 将数据放入data
        success: (res) => {
          console.log(res);
          this.address =
            res.provinceName +
            res.cityName +
            res.countyName +
            res.detailInfo +
            res.postalCode;
          this.username = res.userName;
          this.phone = res.telNumber;
        },
        fail(err) {
          console.log("失败", err);
        },
      });
    },
  },
};
</script>

.<style lang="scss" scoped>
.page-wrap {
  background-color: #e9e9e9;
  min-height: 100vh;
  padding-top: 20rpx;
  .address-wrap {
    height: 187rpx;
    margin: 0 20rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      width: 303rpx;
      line-height: 89rpx;
      border-radius: 45rpx;
      border: 4rpx solid #eb4450;
      text-align: center;
      color: #eb4450;
    }
    .address {
      color: #434343;
      color: #434343;
      height: 70%;
      width: 80%;
      .top {
        font-size: 30rpx;
      }
      .bottom {
        font-size: 26rpx;
        margin-top: 30rpx;
      }
    }
  }
}

// 商品列表部分
.list {
  margin: 20rpx;
  background-color: #fff;
  padding: 17rpx 15rpx 83rpx;
  .main-title {
    font-size: 26rpx;
    color: #434343;
  }
  .item {
    display: flex;
    margin: 20rpx 0;
    .img {
      height: 191rpx;
      width: 191rpx;
      flex-shrink: 0;
    }
    .info {
      flex: 1;
      color: #434343;
      font-size: 24rpx;
      padding: 10rpx 0 10rpx 29rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .bottom {
        display: flex;
        justify-content: space-between;
        .price {
          color: #ea4350;
        }
      }
    }
  }
}

// 底部提交按钮
.submit-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 83rpx;
  border-top: 1rpx solid #e9e9e9;
  font-size: 26rpx;
  padding: 0 28rpx;
  box-sizing: border-box;
  .price {
    color: #ea4350;
    margin-left: 20rpx;
  }
  .btn {
    background-color: #a9a9a9;
    color: #fff;
    line-height: 52rpx;
    padding: 0 26rpx;
    border-radius: 26rpx;
  }
  .active {
    background-color: #eb4450;
  }
}
</style>